<template>
  <div>
      <n-grid x-gap="12" :cols="4">
        <n-gi v-for="(programmeSetting,index) in programmeSettingList" style="margin-top: 20px">
          <n-card :title="programmeSetting.programmeName" size="small">
            <template #header-extra>
              <n-tag v-if="programmeSetting?.isRemote==='1'" size="small" type="primary" style="margin-right: 5px;">系统预设</n-tag>
              {{programmeSetting.programmeType==='VIDEO'?'视频转绘':'小说转绘'}}
            </template>
            <template #cover>
              <n-space justify="center">
              <n-image v-if="programmeSetting.imageUrl" height="300" :object-fit="'cover'"  :src="fileFunction.getProgrammeSettingCoverImage(programmeSetting.imageUrl)" ></n-image>
              <n-image v-else height="300" :object-fit="'cover'" src="https://postimage.me/images/2024/06/01/202205061651820283686522.jpg"></n-image>
              </n-space>
            </template>
            <n-row>
              <n-space>
                <n-tag :bordered="false" size="small" type="primary" v-for="tag in programmeSetting.programmeTags.split(',')">
                  {{tag}}
                </n-tag>
              </n-space>
            </n-row>

            <template #action>
              <n-space justify="space-between">
                <n-button size="small" type="info" @click="markdownText = ( programmeSetting.programmeMarkdown?programmeSetting.programmeMarkdown:'' ) ; introduceShow = true;  ">方案说明</n-button>
                <n-button size="small" type="primary" @click="props.choseConfig(programmeSetting.programmeConfig)">选择</n-button>
              </n-space>
            </template>
          </n-card>
        </n-gi>
      </n-grid>
    <n-modal
        v-model:show="introduceShow"
        preset="card"
        :style="{ width: '1200px'}"
        title="方案说明"
        size="huge"
    >
      <MdPreview style="height: 600px" editorId="preview-only" :theme="darkTheme?'dark':'light'" :modelValue="markdownText"/>
    </n-modal>



  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue"
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {storeToRefs} from "pinia";
import {useSystemStore} from "@/store/modules/useSystemStore"
import {useUserStore} from "@/store/modules/useUserStore";
import {store} from "@/store";
import {MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import {programmeSettingController} from "@/api/story/programmeSetting.api";


const {
  clientHeight,
  layoutHeaderHeight,
  collapsed,
  darkTheme,
  tabsHeight
} = storeToRefs(useSystemStore());


const programmeSettingList = ref([])
const introduceShow = ref(false)
const markdownText = ref('')

const props = defineProps({
  choseConfig : {
    type: Function,
    required: true,
    default: (config:string) => {
    }
  },
  engineType: {
    type: String,
    required: true
  },
  programmeType:{
    type: String,
    required: true
  }
})

onMounted(() => {
  getProgrammeSettingList()
})

const getProgrammeSettingList = () => {
  programmeSettingController.getProgrammeSettingList({
    engineType: props.engineType
  },{
    page: 0,
    pageSize: 100
  }).then(res => {
    if (res.code === 200) {
      programmeSettingList.value = []
      if (res.data.records.length > 0){
        for (let i = 0; i < res.data.records.length; i++) {
          if (res.data.records[i].programmeType === props.programmeType && res.data.records[i].engineType === props.engineType) {
            programmeSettingList.value.push(res.data.records[i])
          }
        }
      }
    } else {
      window.$message.error(res.msg)
    }
  })
}
</script>
